<template>
  <div class="online-datasource-fragment" style="position: relative; ">
    <el-form ref="formEditOnlinePageDatasource" :model="formData" :rules="rules" style="width: 95%;" label-width="100px" size="small" label-position="right" @submit.native.prevent>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="数据源名称" prop="datasourceName">
            <el-input v-model="formData.datasourceName" :clearable="true" placeholder="数据源名称" />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="数据源标识" prop="variableName">
            <el-input v-model="formData.variableName" :clearable="true" placeholder="数据源标识" />
          </el-form-item>
        </el-col>
        <el-col v-if="!isEdit" :span="24">
          <el-form-item label="数据源主表" prop="masterTableId">
            <el-cascader v-model="masterTablePath" filterable :disabled="isEdit" :props="masterTableProps" @change="onMasterTableChange" />
          </el-form-item>
        </el-col>
        <el-col v-else :span="24">
          <el-form-item label="数据源主表">
            <el-input v-model="(masterTableIdDictMap || {}).name" :disabled="true" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer btnList">
      <el-button type="primary" size="small" :plain="true" @click="onCancel(false)">取消</el-button>
      <el-button type="primary" size="small" @click="onSubmit()">保存</el-button>
    </div>
  </div>
</template>

<script>
import { OnlineDatasourceController, OnlineDblinkController } from '@/api/onlineController.js'

export default {
  name: 'FormEditOnlinePageDatasource',
  props: {
    pageId: {
      type: String,
      required: true
    },
    datasourceId: {
      type: String,
      default: undefined
    },
    dblinkInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      masterTableIdDictMap: {},
      formData: {
        datasourceId: this.datasourceId,
        datasourceName: undefined,
        variableName: undefined,
        dblinkId: undefined,
        masterTableId: undefined
      },
      masterTablePath: [],
      rules: {
        datasourceName: [
          { required: true, message: '数据源名称不能为空！', trigger: 'blur' }
        ],
        variableName: [
          { required: true, message: '数据源标识不能为空！', trigger: 'blur' },
          { type: 'string', pattern: /^[a-z][a-zA-Z]+$/, message: '数据源标识必须是小驼峰命名', trigger: 'blur' }
        ],
        masterTableId: [
          { required: true, message: '数据源主表不能为空！', trigger: 'blur' }
        ]
      },
      masterTableProps: {
        lazy: true,
        lazyLoad: this.loadMasterTableData
      }
    }
  },
  computed: {
    isEdit() {
      return this.datasourceId != null && this.datasourceId !== ''
    }
  },
  mounted() {
    if (this.datasourceId != null) {
      OnlineDatasourceController.view({
        datasourceId: this.datasourceId
      }).then(res => {
        this.formData.datasourceId = res.data.datasourceId
        this.formData.datasourceName = res.data.datasourceName
        this.formData.dblinkId = res.data.dblinkId
        this.formData.masterTableId = res.data.masterTableId
        this.formData.variableName = res.data.variableName
        this.masterTablePath = [this.formData.dblinkId, this.formData.masterTableId]
        this.masterTableIdDictMap = res.data.masterTableIdDictMap
      }).catch(e => {})
    }
  },
  methods: {
    onCancel(isSuccess) {
      if (this.observer != null) {
        this.observer.cancel(isSuccess)
      }
    },
    onSubmit() {
      this.$refs.formEditOnlinePageDatasource.validate((valid) => {
        if (!valid) return

        const params = {
          pageId: this.pageId,
          onlineDatasourceDto: {
            datasourceId: this.formData.datasourceId,
            datasourceName: this.formData.datasourceName,
            variableName: this.formData.variableName,
            dblinkId: this.formData.dblinkId,
            masterTableName: this.formData.masterTableId,
            masterTableId: this.isEdit ? this.formData.masterTableId : undefined
          }
        }

        const httpCall = this.isEdit ? OnlineDatasourceController.update(params) : OnlineDatasourceController.add(params)
        httpCall.then(res => {
          this.$message.success('保存成功')
          this.onCancel(true)
        }).catch(e => {})
      })
    },
    onMasterTableChange(values) {
      this.formData.dblinkId = values[0]
      this.formData.masterTableId = values[1]
    },
    /**
     * 获取字典表级联数据
     */
    loadMasterTableData(node, resolve) {
      if (node.level === 0) {
        // 获取dblink信息
        if (this.dblinkInfo == null) {
          OnlineDblinkController.list({}).then(res => {
            resolve(res.data.dataList.map(item => {
              return {
                value: item.dblinkId,
                label: item.dblinkName,
                leaf: false
              }
            }))
          }).catch(e => {
            node.loaded = false
            node.loading = false
          })
        } else {
          resolve(Object.keys(this.dblinkInfo).map(key => {
            const dblinkItem = this.dblinkInfo[key]
            return {
              value: dblinkItem.dblinkId,
              label: dblinkItem.dblinkName,
              leaf: false
            }
          }))
        }
      } else if (node.level === 1) {
        OnlineDblinkController.listDblinkTables({
          dblinkId: node.data.value
        }).then(res => {
          resolve(res.data.map(item => {
            return {
              value: item.tableName,
              label: item.tableName,
              leaf: true
            }
          }))
        }).catch(e => {
          node.loaded = false
          node.loading = false
        })
      }
    }
  }
}
</script>

<style  lang="scss">
  .online-datasource-fragment {
    display: flex;
    flex-direction: column;
    margin: 10px 10px 20px 10px;
    .blueLink {
      color: #409eff;
      font-size: 14px;
      margin-left: 20px;
      cursor: pointer;
    }
    .btnList {
      margin-top:20px;
      display: flex;
      justify-content: right;
      float: right;
      .submitBtn {
        margin-right: 30px;
      }
    }
    .fromFlex {
      height: 36px;
      display: flex;
      align-items: center;
    }
    .base-info {
      display: flex;
      margin-bottom: 20px;
      .basics-info {
        width: 100%;
      }
    }
  }
</style>
